<template>
  <div class="custom_template">
    <el-tabs v-model="activeName" @tab-click="switchTabs">
      <el-tab-pane label="结单模版" name="finish">
        <FinishCard ref="finishCard" />
      </el-tab-pane>
      <el-tab-pane label="回访模版" name="rate">
        <RateCard ref="rateCard" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
  import FinishCard from '../FinishCard/index.vue'
  import RateCard from '../RateCard/index.vue'
  import { ref, watch, nextTick } from 'vue'
  import type { TabsPaneContext } from 'element-plus'
  import { useRoute } from 'vue-router'

  const activeName = ref('finish')
  const finishCard = ref()
  const rateCard = ref()
  const route = useRoute()

  // 导航切换
  const switchTabs = (tab: TabsPaneContext) => {
    switch (tab.props.name) {
      case 'finish':
        finishCard.value.getList()
        break
      case 'rate':
        rateCard.value.getList()
        break
    }
  }

  // 获取结单模版列表
  const getTempList = () => {
    finishCard.value.getList()
  }

  watch(
    () => route.name,
    (value) => {
      nextTick(() => {
        if (value === 'orderSet') {
          switch (activeName.value) {
            case 'finish':
              finishCard.value.getList()
              break
            case 'rate':
              rateCard.value.getList()
              break
          }
        }
      })
    },
  )
  defineExpose({ getTempList })
</script>

<style scoped lang="scss">
  @import '../../index.scss';
</style>
